<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ru">

<div th:fragment="loadDataContainer(id)" class="columns">
    <div th:id="${id}" class="column">
        <div class="box">
            <p>Загрузка данных...</p>
            <progress style="height: 0.1rem; border-radius: 0;" class="progress is-small is-primary"
                      max="100"></progress>
        </div>
    </div>
</div>

<div th:fragment="globalErrorMessage" class="error-message-container is-hidden">
    <div class="columns">
        <div class="column is-6 is-offset-3">
            <div class="notification is-danger has-text-centered is-radiusless">
                <button class="delete"></button>
                <p></p>
            </div>
        </div>
    </div>
</div>

<nav th:fragment="tablePagination(pages, current, url, container, search)" class="pagination is-small" role="navigation"
     aria-label="pagination"
     th:data-search="${search}"
     th:data-reload-container="${container}"
     th:data-reload-url="${url}">
    <ul class="pagination-list" th:if="${pages > 1}">
        <th:block th:if="${pages <= 5}">
            <li th:each="i: ${#numbers.sequence(1, pages)}">
                <a class="pagination-link" th:attrappend="data-page=${i}"
                   th:classappend="${current == i ? 'is-current' : ''}" th:text="${i}"></a>
            </li>
        </th:block>
        <th:block th:unless="${pages <= 5}">
            <li>
                <a class="pagination-link" th:attrappend="data-page=1" th:classappend="${current == 1 ? 'is-current' : ''}" th:text="${1}"></a>
            </li>
            <li th:if="${current > 3}">
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li th:if="${current - 1 > 1}">
                <a class="pagination-link" th:attrappend="data-page=${current - 1}"  th:text="${current - 1}"></a>
            </li>
            <li th:if="${current > 1 && current < pages}">
                <a class="pagination-link is-current" th:attrappend="data-page=${current}"  th:text="${current}"></a>
            </li>
            <li th:if="${current + 1 < pages}">
                <a class="pagination-link" th:attrappend="data-page=${current + 1}"  th:text="${current + 1}"></a>
            </li>
            <li th:if="${current < pages - 2}">
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li>
                <a class="pagination-link" th:attrappend="data-page=${pages}" th:classappend="${current == pages ? 'is-current' : ''}" th:text="${pages}"></a>
            </li>
        </th:block>
    </ul>
</nav>

<th:block th:fragment="stepInfo (step)">
    <span class="tag is-warning" th:if="${step eq 'NEW_USER' or step eq 'EMPTY_TOKEN' or step eq 'EMPTY_CLIENT_ID'}" th:text="${step}"></span>
    <span class="tag is-primary" th:if="${step eq 'USER_ADDED'}" th:text="${step}"></span>
    <span class="tag is-dark" th:if="${step eq 'EMPTY_TOKEN_AFTER_CLEAR'}" th:text="${step}"></span>
</th:block>

</html>